import { Link } from '@brillout/docpress'

TO-DO/eventually: write a new guided tour.
 - The content down below was copy-pasted as-is from old removed /config content.


## `+config.js`

The `+config.js` files is the interface between Vike and your code.

You can use `+config.js` to define a new page:

```ts
// /pages/about/+config.ts

// The file defines a new page with URL /about

import type { Config } from 'vike/types'
import { AboutPage } from './AboutPage'

export default {
  Page: AboutPage
} satisfies Config
```

> The URL `/about` is determined by the filesystem location of `/pages/about/+config.js`, see <Link href="/filesystem-routing" />.

```tsx
// /pages/about/AboutPage.tsx

export const AboutPage = () => <>Vike Demo</>
```

Another example:

```ts
// /pages/product/+config.ts

// This file defines a new page with URL '/product/@id'

import type { Config } from 'vike/types'
import { ProductPage } from './ProductPage'

export default {
   Page: ProductPage,
   // Parameterized route that matches URLs such as /product/1337 and /product/macbook
   route: '/product/@id'
} satisfies Config
```

> Setting the `route` value overrides Filesystem Routing.

```tsx
// /pages/product/ProductPage.tsx

export { ProductPage }

function ProductPage() {
  return (
    <>
      <h1>Product Information</h1>
      ...
    </>
  )
}
```

> You can also create a file `/pages/product/+Page.js` instead of setting `/pages/product/+config.js > export default { Page }`, see <Link href="#other-files" doNotInferSectionTitle />.


## Other `+` files

For convenience, instead of defining <Link href="#config-js">`+config.js`</Link>, you can define `+Page.js` and `+route.js`:

```ts
// /pages/product/+route.ts

export default '/product/@id'
```
```tsx
// /pages/product/+Page.tsx

export { ProductPage as Page }

function ProductPage() {
  return (
    <>
      <h1>Product Information</h1>
      ...
    </>
  )
}
```

Which is equivalent to:


```ts
// /pages/product/+config.ts

import type { Config } from 'vike/types'
import { ProductPage } from './ProductPage'

export default {
   Page: ProductPage,
   route: '/product/@id'
} satisfies Config
```

```tsx
// /pages/product/ProductPage.tsx

export { ProductPage }

function ProductPage() {
  return (
    <>
      <h1>Product Information</h1>
      ...
    </>
  )
}
```

It doesn't make a difference whether you define the `Page` value by creating a plus file `+Page.js` or by setting `+config.js > export default { Page }`.
